<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>
  <img src="" alt="" id="show">
  <br />
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      //点击上传文件按钮, 判断文件是否选中
      $('#btnUpload').on('click', function () {
        // 判断有没有选择文件
        // 先获取文件标签,获取的files属性
        const file = $('#file1')[0].files;
        // 判断长度是否为0
        if (file.length == 0) {
          return alert('请选择文件上传')
        }
        // 创建FormData
        const fd = new FormData();
        // 把文件填充到fd内
        fd.append('avatar', file[0])
        // 发起ajax请求
        $.ajax({
          // 数据发送之前触发的函数
          beforeSend: function () {
            // 让加载图片显示
            $('#loading').show()
          },
          type: "post",
          url: "http://www.liulongbin.top:3006/api/upload/avatar",
          data: fd,
          // 如果是jq传递formdata数据,必须写以下两个参数
          processData: false,
          contentType: false,
          success: function (res) {
            if (res.status != 200) {
              alert('上传失败')
            } else {
              // 数据拿到之后,让loading消失
              $('#loading').hide()
              $('#show').prop('src', 'http://www.liulongbin.top:3006' + res.url)
            }
          }
        });
      })

      // ①准备上传的标签 <input type="file" />
      // ②准备好一个按钮, 注册点击事件
      // ③用户点击按钮: 拿文件
      const file = $('input')[0].files //保存的就是上传的文件 {0: 真实的文件, 1: 真实的文件, length: 2}
      // ④文件上传功能 语法: const fd = new FormData()
      const fd = new FormData(); // new创建的就是一个对象  H5新增的保存文件的对象, 有一个保存文件的方法, 叫append(后端需要的参数, 文件)
      fd.append('avatar1', file[0])
      fd.append('avatar2', file[1])
      // fd.avatar = file


      $.ajax({
        type: "post",
        url: "url",
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {

        }
      });

    
    })
  </script>

</body>

</html>